<template>
  <div class="page-detail">
    <el-row>
      <el-col :span="24">
        <Crumbs :keyword="keyword" :type="type"/>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <Summa :meta="product" />
      </el-col>
    </el-row>
    <el-row class="detail-title" v-if="list.length || !login">
      <el-col :span="24">
        <h3>商家团购及优惠</h3>
      </el-col>
    </el-row>

    <el-row v-if="list.length || !login">
      <el-col :span="24">
        <List v-if="login" :list="list" />

        <div
          v-else
          class="deal-need-login">
          <img
            src="//p0.meituan.net/codeman/56a7d5abcb5ce3d90fc91195e5b5856911194.png"
            alt="登录查看">
          <span>请登录后查看详细团购优惠</span>
          <el-button
            type="primary"
            round>
            <a href="/login">立即登录</a>
          </el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Crumbs from '../components/detail/crumbs'
import Summa from '../components/detail/summary'
import List from '../components/detail/list'
import axios from 'axios'
export default {
  components: {
    Crumbs,
    Summa,
    List
  },

  async asyncData(ctx) {
    let {keyword, type} = ctx.query
    
    let {data} = await ctx.store.dispatch('api/product', {
      keyword,
      type,
      city:ctx.store.state.api.position.city
    })
    

    //未解决问题 asyncData 请求接口没有带cookie ,导致ctx.isAuthenticated()失效.,解决方法: 视频里是axios挂上vue实例中. 或者把cookie存储在store
    // axios.defaults.withCredentials=true
    // let res = await axios.get(`http://127.0.0.1:3000/search/product`, { params:  {
    //   keyword,
    //   type,
    //   city:ctx.store.state.api.position.city
    // } })

    // console.log(res.data.login, 'asyncData res')
    // 修改了返回逻辑
    if (data) {
      return {
        product: data.product,
        list: data.more.filter(item => item.photos.length),
        type,
        keyword
      }
    } else {
      return {
        product:{},
        list:[],
        keyword,
        type
      }
    }
  },
  computed: {
    // canOrder() {
    //   return this.list.filter(item => item.photos.length).length
    // },
    login() {
      return this.$store.state.api.user.username ? true : false
    }
  }
}
</script>

<style lang="scss">
@import "@/assets/css/detail/index.scss";
</style>

